How do I install the item?
Copy and paste all the items in the code folder to your server to your desired location.
What are those i class"fa " things?
That is Font Awesome, the amazing icons we used for this item you can learn more about them and find a cheatsheet on how to use them here http://fortawesome.github.io/Font-Awesome/icons/
How do I change the contact form information?
There is only one PHP file in the item, please open that item and replace the email address with yours.
<div class="all-elements">
<div class="navigation-background"></div>
<div class="navigation-wrapper"><!-- Navigation goes here--><div>
<div class="header"><!--Header goes here -->
<div class="header-clear"></div>
<div class="content">
<div class="decoration transparent"></div>
<div class="container"><!--Features Go Here--></div>
<div class="decoration"></div>
<div class="footer"><!--Footer goes here--></div>
</div>
</div>
<div class="header">
<a href="#" class="header-logo"></a>
<a href="#" class="header-menu show-navigation"><i class="fa fa-navicon"></i></a>
</div>
Line 1 creates the header wrapper
Line 2 creates the header logo. To edit the header logo, please open style.css and go to line 301. Remember that replacing the image is done best when using a double sized image and using half the values to maintain a high dpi / retina look on devices.
Line 3 creates the header show navigation icon
Line 4 closes the header.
<div class="slider-container full-bottom">
<div class="homepage-slider" data-snap-ignore="true">
<div>
<div class="overlay"></div>
<div class="homepage-slider-caption homepage-left-caption">
<h3>Swipe me!</h3>
<p>Hope you enjoy our latest item!</p>
</div>
<img src="images/pictures/3.jpg" class="responsive-image" alt="img">
</div>
</div>
</div>
To create more slides simply duplicate lines 3 to 10 and replace the image and text with yours. The caption text can be left right or center and can be achieved by replacing homepage-SIDE-caption side with left center or right.
<p class="thumb-left no-bottom">
<img src="images/pictures/1s.jpg" alt="img">
<strong>Mobile app feel </strong>
<em><br>Lorem Ipsum is simply dummy text of the printing and typeset. </em>
</p>
<div class="thumb-clear"></div>
Line 1 creates the container for the thumbnail with image to the left. The class must be thumb-left.
Line 2 is the icon on the left side
Line 3 is the title of the icon
Line 4 is the closing container for the thumbnail column
Line 5 clears the flotation of the columns.
To create a right thumbnail, simply replace thumb-left with thumb-right and follow the exact same structure as above.
<div class="container">
<a href="#" class="next-staff"></a>
<a href="#" class="prev-staff"></a>
<div class="staff-slider" data-snap-ignore="true">
<div><!--Duplicate Me-->
<div class="staff-item">
<img src="images/pictures/1s.jpg" alt="img">
<h4>John Doe</h4>
<em>Web Designer</em>
<strong>We love quotes, and sometimes it's</strong>
<a href="#" class="button button-red center-button">Call</a>
</div>
</div>
</div>
</div>
To create more slides, simply duplicate the class that has the <!--Duplicate Me--> comment.
After doing so, replace the image and text with your own, and you have a new slide
No! We have 2 documentations. This one explained the main features of the template, and it's structure. The second documentation describes the features from each indivudual page.
If there is anything you don't understand, please send us a message http://enableds.com/html-support/ through our support page and we will gladly assist you with absolutely anything that's related to the template! We take great pride in providing top notch support to all our customers!
Please don't forget to rate 5 stars!